﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Test</title>
    <script src="../../../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../../../../Scripts/jquery.form.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").on('click', function () {

            });

            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal);
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal);
                    percent.html(percentVal);
                    //console.log(percentVal, position, total);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal);
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    //status.html(xhr.responseText);
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <form enctype="multipart/form-data" method="post" action="/Admin/Product/Upload">
            <input type="file" name="myfile[]"><br>
            <input type="file" name="myfile[]"><br>
            <input type="file" name="myfile[]"><br>
            <input type="submit" value="Upload File to Server">
        </form>
        <div class="progress">
            <div class="bar"></div>
            <div class="percent">0%</div>
        </div>
    </div>
</body>
</html>

